<template>
  <div id="linsmooth" style="width: 780px; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    datas: Array,
    title: String,
  },
  data() {
    return {
      option: {},
      charts: "",
    };
  },
  mounted() {
    this.option = {
      title: {
        text: this.title,
      },
      dataset: {
        source: this.datas,
      },
      xAxis: {
        type: "category",
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          type: "line",
          seriesLayoutBy: 'row',
          smooth: true,
          encode: {
            x: "x",
            y: "y",
          },
        },
      ],
    };
    this.charts = echarts.init(document.getElementById("linsmooth"));
    this.charts.setOption(this.option);
  },
  watch: {
    datas: {
      handler(nd) {
        this.option.dataset.source = nd;
        this.charts.setOption(this.option);
      },
      deep: true,
    },
  },
};
</script>

<style>
</style>